<template>
  <div class="register">
    <!--v-model 对于一个输入框来讲 其实就是v-bind:value 和 @input的集合-->
    <div class="content-box">
        <h2>新用户注册</h2>
        <p class="desc">很高兴您将成为商城的会员（注册只需一步）</p>
        <!--rules中的正则验证必须在表单中才会生效-->
        <van-form>
            <van-field v-model="register.mobile" placeholder="手机号码"
            :rules="[{ pattern: /^1[356789]\d{9}/, message: '手机号码格式不正确' }]"
             />
            <van-field v-model="register.pwd" placeholder="密码"
            :rules="[{ pattern: /^\w{6,18}/, message: '密码格式不正确' }]"
             />
            <van-field v-model="cartainPwd" placeholder="确认密码" 
            :rules="[{ validator, message: '与密码不一致' }]"
            />
            <van-field v-model="register.nick" placeholder="用户名"
            :rules="[{ validator: nickValid, message: '用户名不能为空' }]"
             />
            <van-field v-model="imageCode">
                <template #button>
                    <img class="imgCode" @click="changImageCode" :src="imgCode"  alt="">
                </template>
            </van-field>
            <van-field disabled />
            <van-field v-model="register.code">
                <template #button>
                    <van-button size="small" type="primary" @click="getCode">{{text}}</van-button>
                </template>
            </van-field>
        </van-form>
    </div>
 </div>
</template>

<script>
import myInput from '@/components/myInput/myInput'
import { checkImageCode } from '@/api/profile'
var timer = null
export default {
    name: '',
    components: {
        myInput
    },
    data() { 
        return {
            register: {
                mobile: '',
                pwd: '',
                code: '',
                nick: '',
                province: '',
                city: '',
                postJsonString: ''
            },
            imageCode: '',
            imgCode: 'https://api.it120.cc/small4/verification/pic/get?key=' + new Date().getTime(),
            cartainPwd: '',
            content: '',
            validator: (val) => {
                if(val === this.register.pwd) {
                    return true
                }else {
                    return false
                }
            },

            nickValid(val) {
                if(val) {
                    return true
                } else {
                    return false
                }
            },

            text: '获取验证码',
            timeStr: new Date().getTime()
        }
    },
    methods:{
        changImageCode() {
            this.timeStr = new Date().getTime()
            this.imgCode = 'https://api.it120.cc/small4/verification/pic/get?key=' + this.timeStr
        },

        getCode() {
            let num = 10
            timer = setInterval(() => {
                if(num > 0) {
                    num--
                    this.text = num + '秒后再试'
                } else {
                    clearInterval(timer)
                    this.text = "获取验证码"
                }
            }, 1000) 
            checkImageCode({
                mobile: this.register.mobile,
                picCode: this.imageCode,
                key: this.timeStr
            }).then(res => {

            })
        }
    }
 }
</script>

<style scoped lang="scss">
.register {
    padding: 40px;
    height: 100%;
    width: 100%;
    background-color: #fff;
    h2 {
        font-size: 46px;
        color: #333;
        font-weight: 500;
        margin-bottom: 60px;
    }
    .content-box {
        border: 1px solid #ccc;
        padding: 0 40px;
        padding-top: 60px;
        .desc {
            font-size: 26px;
            color: #909090;
        }
        /deep/ .van-field {
            background-color: #F5F5F5;
            border: none;
            margin-top: 40px;
            border-radius: 10px;
        }
    }
}
.imgCode {
    width: 260px;
    height: 60px;
}
</style>